<!--
 * @Author: malgee
 * @Date: 2025-04-27 15:17:55
 * @LastEditors: maling
 * @LastEditTime: 2025-04-28 12:50:49
 * @FilePath: /vue3-ts-cms/src/components/page-content/src/page-content.vue
 * @Description: 
 * 
-->
<template>
  <div class="page-content">
    <mg-table
      :listData="listData"
      :totalCount="totalCount"
      v-bind="contentTableConfig"
      :columns="contentTableConfig.columns"
      v-model:page="page"
    >
    <!-- header中的插槽 -->
    <template #headerHandler>
      <el-button
          v-if="isCreate"
          type="primary"
          size="default"
          @click="handleAddClick"
        >
          新建用户
        </el-button>
    </template>

    <!-- 列表中指定的(公共部分)插槽 -->
    <template #status="scope">
      <el-button plain size="small" :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '启用' : '禁用' }}</el-button>
    </template>
    <template #createAt="scope">
      {{ $filters.formatUTCDateTime(scope.row.createAt) }}
    </template>
    <template #updateAt="scope">
      {{ $filters.formatUTCDateTime(scope.row.updateAt) }}
    </template>
    <template #handler="scope">
      <div class="handle-btns">
          <el-button
            v-if="isUpdate"
            icon="el-icon-edit"
            size="small"
            type="primary"
            link
            @click="handleEditClick(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            v-if="isDelete"
            icon="el-icon-delete"
            size="small"
            type="primary"
            link
            @click="handleDeleteClick(scope.row)"
            >删除</el-button
          >
        </div>
    </template>

    <!-- 列表中自己独特的自定义的插槽 -->
    <template v-for="item in otherSlots" :key="item.prop" #[item.prop]="scope">
      <template v-if="item.slotName">
        <!-- 这是作用域插槽, 传递给父组件 -->
        <slot :name="item.slotName" :row="scope.row"></slot>  
      </template>
    </template>
  </mg-table>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, defineProps, defineEmits, defineExpose } from 'vue'
import MgTable from '@/base-ui/table'
import store from '@/store'
import { usePermission } from '@/hooks/use-permission'

const props = defineProps({
  // 外部传递进来的配置文件
  contentTableConfig: {
    type: Object,
    required: true
  },
  pageName: {
    type: String,
    required: true
  }
})
const page = ref({
  size: 10,
  current: 1
})

// 1. 获取权限
const isCreate = usePermission(props.pageName, 'create')
const isUpdate = usePermission(props.pageName, 'update')
const isDelete = usePermission(props.pageName, 'delete')
const isQuery = usePermission(props.pageName, 'query')



// 2. 发送网络请求,获取分页数据
const getPageData = (queryInfo: any = {}) => {
  store.dispatch('system/getPageListAction', {
    pageName: props.pageName,
    queryInfo: {
      ...queryInfo,
      offset: (page.value.current - 1) * page.value.size,
      size: page.value.size
    }
  })
}
getPageData()

// 3. 从vuex中获取数据
const listData = computed(() => store.getters[`system/pageListData`](props.pageName))
const totalCount = computed(() => store.getters[`system/pageListCount`](props.pageName))


// 4. 获取非公共的其他动态插槽
const otherSlots = props.contentTableConfig?.columns?.filter((item: any) => {
  if (item.prop === 'status') return false
  if (item.prop === 'createAt') return false
  if (item.prop === 'updateAt') return false
  if (item.prop === 'handler') return false
  return true
})


const emit = defineEmits(['editBtnClick', 'addBtnClick'])
const handleAddClick = () => {
  console.log('handleAddClick');
  emit('addBtnClick')
}

const handleEditClick = (item: any) => {
  emit('editBtnClick', item)
}

const handleDeleteClick = (item: any) => {
  console.log('handleDeleteClick', item)
}


defineExpose({
  getPageData
})
  

</script>
<style lang="less" scoped>

</style>